<template>
  <div>
    <!-- Title -->
    <div>
      <TitleCompound :title="title" />
    </div>

    <!-- Content -->
    <div>
      <el-table :data="[getNews()]" style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="Title" width="180" />
        <el-table-column prop="author" label="Author" />
        <el-table-column prop="publishedDate" label="PublishedDate" />
        <el-table-column prop="content" label="Content" />
      </el-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
import TitleCompound from '@/components/TitleCompound.vue';
import { useNewsStore } from '@/stores/News';

import { useRoute } from 'vue-router';

const title = "Router Detail"

const route = useRoute();
console.log(">>>> route   ", route)
const newsStore = useNewsStore();

function getNews() {
  const id = route.query.id as string;
  const news = newsStore.getNewsById(id);
  // console.log(">>>>> id: ", id, " news: ", news)
  return news
}


</script>
<style lang="scss" scoped></style>
